<template>
	<view style="padding: 30rpx;">
		<view class="f ai-c">
			<image :src="info.picUrl" style="width: 160rpx;height: 160rpx;border-radius: 10rpx;"></image>
			<view class="ml-20">
				<view class="fs-28" style="font-weight: bold;">{{info.name}}</view>
				<view class="fs-24 mt-10" style="color:#666">商品原价：￥{{info.bargainFirstPrice}}</view>
				<view class="fs-24 mt-10" style="color:red;font-weight: bold;">当前价：￥{{info.bargainPrice}}</view>
			</view>
		</view>
		<u-line margin="20rpx 0"></u-line>
		<u-gap height="80rpx"></u-gap>
		<view class="title">已有{{list.length}}人助力，赶快邀请好友拼单</view>
		<view class="grid">
			<view class="item" v-for="(item,index) in list">
				<u-avatar :src="item.avatar" size="96rpx"></u-avatar>
				<view class="name">{{item.nickname}}砍价{{item.reducePrice}}元</view>
			</view>
		</view>
		<view class="btn" @click="toImg">邀请好友砍价</view>
		<view class="home" @click="home">返回首页逛逛</view>
		<u-overlay :show="showPost">
		    <view class="w-f f ai-c jc-c post fd-c" v-if="showPost">
		       <Poster
		           @success="posterSuccess"
		           :imgSrc="goods.itempic"
		           :QrSrc="erweimapath"
		           :Title="goods.itemtitle"
		           :PriceTxt="goods.itemendprice"
		           :OriginalTxt="goods.itemprice"
		           :LineType="false"
		           :Width="450"
		       />
		        <view class="w-f h-300"></view>
		    </view>
		
		    <view class="share">
		        <view class="ph-32 pt-32 pb-40">
		            <view class="f mt-48" style="justify-content: space-around;">
		                <view class="box2 f fd-c ai-c">
		                    <image src="http://cwht.ricecs.cn/app/shop/wx.png" class="w-96 h-96 mb-16"></image>
		                    <view class="fs-24 text-color3">微信</view>
		                </view>
		                <view class="box2 f fd-c ai-c" @click="keepTap">
		                    <image src="http://cwht.ricecs.cn/app/shop/keep.png" class="w-96 h-96 mb-16"></image>
		                    <view class="fs-24 text-color3">保存图片</view>
		                </view>
		            </view>
		        </view>
		        <view class="cancel w-f h-98 f ai-c jc-c fs-32 fw-600 text-color4" @click="showPost = false">取消</view>
		    </view>
		</u-overlay>
	</view>
</template>

<script>
	import {bargainlist,bargaindetail,bargainposter} from '@/services/api/shop/index';
	import Poster from '@/components/cc-poster/index.vue';
	export default {
		components:{
			Poster
		},
		data() {
			return {
				list:[],
				id:'',
				showPost:false,
				erweimapath:'',
				goods:{
				    itemid: '2nNozWXiotnRwxGUakBuXUD-0npyN5GSNmYDb0pgTxw',
				    itemtitle: '产品名称',
				    itemprice: '39.90',
				    todaysale: '3',
				    itempic: '',
				    itemendprice: '29.91',
				},
				activityId:'',
				info:''
			}
		},
		onLoad(opt){
			this.id=opt.id
			this.activityId=opt.activityId
			this.loadData()
		},
		methods: {
			posterSuccess(data){
			    tempFilePath.value = data.tempFilePath;
			},
			keepTap(){
			    uni.getImageInfo({
			        src: tempFilePath.value,
			        success: function (image) {
			            uni.saveImageToPhotosAlbum({
			                filePath: image.path,
			                success: function () {
			                    console.log('save success');
			                    uni.showToast({
			                        title: '海报已保存相册',
			                        icon: 'success',
			                        duration: 2000,
			                    });
			                },
			            });
			        },
			    });
			},
			home(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			async loadData(){
				let data={
					recordId:this.id
				}
				const res=await bargainlist(data)
				this.list=res.data
				//获取商品信息
				data={
					id:this.id,
					activityId:this.activityId
				}
				const res2=await bargaindetail(data)
				let list=res2.data.picUrl.split(',')
				this.info=res2.data
				this.goods.itemtitle = res2.data.name;
				this.goods.itemprice = res2.data.bargainMinPrice;
				this.goods.itemendprice = res2.data.bargainMinPrice;
				if(list.length>0){
					this.goods.itempic = list[0];
				}
				
			},
			async toImg(){
				uni.showLoading({
					title:'加载中'
				})
				let data={
					id:this.id,
					width:300,
					height:300
				}
				const res=await bargainposter(data)
				this.erweimapath='data:image/jpeg;base64,'+res.data.posterQRCode
				this.showPost=true
				uni.hideLoading()
			}
		}
	}
</script>

<style lang="scss">
	.share {
	    position: fixed;
	    width: 100%;
	    left: 0;
	    bottom: 0;
	    border-radius: 24rpx 24rpx 0 0;
	    background: #fff;
	    .cancel {
	        border-top: 1px solid #f5f5f5;
	    }
	    .box2 {
	        width: 25%;
	    }
	    .box {
	        width: 20%;
	    }
	    .old-price {
	        text-decoration: line-through;
	    }
	}
	.title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 40rpx;
	}
	.btn{
		margin: 0 auto;
		margin-top: 62rpx;
		width: 410rpx;
		height: 96rpx;
		background: #FABB3C;
		border-radius: 48rpx;
		text-align: center;
		line-height: 96rpx;
		color:#fff;
		font-size: 32rpx;
		
	}
	.home{
		text-align: center;
		font-size: 26rpx;
		margin-top: 40rpx;
	}
	.grid {
		display: grid;
		grid-gap: 36rpx;
		grid-template-columns: repeat(5, 1fr);
		.item{
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.name{
				font-size: 24rpx;
				margin-top: 12rpx;
				text-align: center;
			}
		}
	}
</style>